<template>
    <div class="cart-popup" v-show="visible">
      <div class="popup-content">
        <h3>购物车</h3>
        <ul class="order-detailed">
          <li v-for="item in filteredCartItems" :key="item.foodId">
            <div class="order-detailed-left">
              <img :src="item.foodImg">
              <p>{{ item.foodName }} x {{ item.quantity }}</p>
            </div>
            <p>¥{{ (item.foodPrice * item.quantity).toFixed(2) }}</p>
          </li>
        </ul>
        <div class="order-deliveryfee" v-if="totalPrice > 0">
          <p>配送费</p>
          <p>¥{{ business.deliveryPrice }}</p>
        </div>
        
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'CartPopup',
    props: {
      cartItems: {
        type: Array,
        default: () => []
      },
      business: {
        type: Object,
        default: () => ({})
      },
      visible: {
        type: Boolean,
        default: false
      }
    },
    computed: {
      filteredCartItems() {
        return this.cartItems.filter(item => item.quantity > 0);
      },
      totalPrice() {
        return this.filteredCartItems.reduce((total, item) => {
          return total + (item.foodPrice * item.quantity);
        }, this.business.deliveryPrice);
      }
    },
    methods: {
      closePopup() {
        this.$emit('close');
      }
    }
  }
  </script>
  
  <style scoped>
  .cart-popup {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
  }
  
  .popup-content {
    background-color: #fff;
    width: 100%;
    max-height: 70%;
    border-radius: 5px 5px 0 0;
    padding: 20px;
    padding-bottom: 20vw;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
  }
  
  h3 {
    box-sizing: border-box;
    padding: 3vw;
    font-size: 4vw;
    color: #666;
    border-bottom: solid 1px #DDD;
  }
  
  .order-detailed {
    width: 100%;
  }
  
  .order-detailed li {
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .order-detailed-left {
    display: flex;
    align-items: center;
  }
  
  .order-detailed-left img {
    width: 10vw;
    height: 10vw;
  }
  
  .order-detailed-left p {
    font-size: 3.5vw;
    margin-left: 3vw;
  }
  
  .order-detailed li p {
    font-size: 3.5vw;
  }
  
  .order-deliveryfee {
    height: 16vw;
    box-sizing: border-box;
    padding: 3vw;
    color: #666;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 3.5vw;
  }
  
 
  </style>